<template>
	<view class="container">
		<view class="close-box">
			<text v-show="countdown>0" class="close">{{countdown}}s</text>
			<text v-show="showClose" class="close" @click="closeVideo">跳过</text>
		</view>
		<video id="myVideo" :src="src" :autoplay="true" :controls="false" @ended="onfinish"
			@timeupdate="onTimeUpdate" object-fit="fill" :enable-progress-gesture="false" :enable-play-gesture="false" class="video"></video>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				src: "http://img.qxgm.site/sjcs/static/public/vido.mp4", //视频地址
				showClose: false,
				countdown: '',
			}
		},
		onReady() {
			this.videoContext = uni.createVideoContext('myVideo')
		},
		onLoad() {
			this.isFinish = false
			this.isPalying = false
		},
		onShow() {
			if (!this.isFinish && this.videoContext) this.videoContext.play()
		},
		onBackPress() {
			return !this.isFinish
		},
		methods: {
			onfinish(e) {
				console.log("onfinish:" + JSON.stringify(e));
				this.showClose = true
				this.isFinish = true
				this.getLvCrystal()
			},

			// 看广告领取每日称谓奖励
			async getLvCrystal(){
				let res = await this.$http.index.getLvCrystal();
				this.$u.toast(res.msg)
			},
			closeVideo() {
				uni.navigateBack()
			},
			toLandVideo() {
				this.videoContext.pause()
				uni.navigateTo({
					url: "/pages/landVideo/landVideo"
				})
			},
			onTimeUpdate(e) {
				this.countdown = parseInt(e.detail.duration - e.detail.currentTime)
			}
		}
	}
</script>
<style lang="less" scoped>

	page {
		background: #000;
	}
	.container {
		width: 100vw;
		height: 100vh;
		position: relative;
		line-height: 0;
		padding: 0;
		margin: 0;
		background: #000;
		flex: 1;
	}
	.video {
		flex: 1;
		width: 100vw;
		height: 100vh;
	}
	.close-box {
		position: absolute;
		top: 0;
		right: 10px;
		height: 40px;
		padding: 15px 15px 0 0;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		font-size: 12px;
		line-height: 25px;
		border-radius: 20px;
	}
	.close {
		width: 50px;
		height: 25px;
		text-align: center;
		font-size: 12px;
		line-height: 25px;
		border-radius: 20px;
		background: #000;
		z-index: 99;
		color: #fff;
		flex-direction: row;
	}
	
</style>